import { Empty, NavBar, List } from 'antd-mobile'
import { TextOutline, ShopbagOutline } from 'antd-mobile-icons'
import { getOrderList, getOrderState } from '../../api/ressService'
import { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import styles from './code.module.scss'

/**
 * 订单数据类型定义
 * 用于定义从后端API返回的订单数据结构
 */
interface OrderData {
  id: number          // 订单唯一标识符
  uid: number         // 用户ID
  state: number       // 订单状态：0-已支付，1-待支付，2-已发货，3-已完成，4-已取消
  createTime: string  // 订单创建时间
  totalPrice: number  // 订单总金额
  address: string     // 收货地址信息（JSON字符串格式）
  goods: string       // 商品信息（JSON字符串格式）
}

/**
 * 订单列表页面组件
 * 显示用户的所有订单，支持点击跳转到下单页面重新下单
 */
const Index = () => {
  // 路由导航钩子，用于页面跳转
  const navigate = useNavigate()
  
  // 订单列表状态，存储从API获取的订单数据
  const [orderList, setOrderList] = useState<OrderData[]>([])

  /**
   * 获取订单列表数据
   * 调用API获取所有状态的订单列表和订单状态统计
   */
  const getList = async () => {
    try {
      // 获取所有状态的订单列表
      const res = await getOrderList({ state: 'all' })
      console.log('订单列表数据:', res);
      setOrderList(res.data || [])
      
      // 获取订单状态统计信息
      const res2 = await getOrderState()
      console.log('订单状态统计:', res2);
    } catch (error) {
      console.error('获取订单数据失败:', error);
    }
  }

  /**
   * 处理订单点击事件
   * 将订单数据转换为下单页面需要的格式，并跳转到下单页面
   * @param order 被点击的订单数据
   */
  const handleOrderClick = (order: OrderData) => {
    // 解析订单中的商品和地址信息
    const goodsList = parseGoods(order.goods)
    const addressInfo = parseAddress(order.address)
    
    // 将订单商品数据转换为购物车格式，用于下单页面显示
    const cartItems = goodsList.map((goods: any) => ({
      shopSpuId: goods.shopSpuId,           // 商品SPU ID
      skuId: goods.skuId,                   // 商品SKU ID
      title: goods.title,                   // 商品标题
      image: goods.image,                   // 商品图片
      price: goods.price,                   // 商品价格
      quantity: goods.quantity,             // 商品数量
      tag: goods.tag,                       // 商品标签（如OTC）
      selectedSpecsText: goods.selectedSpecsText, // 选中的规格文本
      selected: true                        // 默认选中状态
    }))
    
    // 跳转到下单页面，传递订单相关数据
    navigate('/addcode', {
      state: {
        orderData: order,        // 原始订单数据
        cartItems: cartItems,    // 转换后的购物车商品数据
        addressInfo: addressInfo, // 解析后的地址信息
        fromOrderList: true      // 标记来源，用于下单页面识别数据来源
      }
    })
  }
  
  // 组件挂载时获取订单数据
  useEffect(() => {
    getList()
  }, [])

  /**
   * 解析地址信息
   * 将JSON字符串格式的地址信息解析为对象
   * @param addressStr 地址信息的JSON字符串
   * @returns 解析后的地址对象，解析失败时返回默认值
   */
  const parseAddress = (addressStr: string) => {
    try {
      return JSON.parse(addressStr)
    } catch (error) {
      console.warn('地址信息解析失败:', error);
      // 返回默认地址信息，避免页面崩溃
      return { 
        nickname: '未知用户', 
        tel: '', 
        provice_city_area: '', 
        detail_address: '' 
      }
    }
  }

  /**
   * 解析商品信息
   * 将JSON字符串格式的商品信息解析为数组
   * @param goodsStr 商品信息的JSON字符串
   * @returns 解析后的商品数组，解析失败时返回空数组
   */
  const parseGoods = (goodsStr: string) => {
    try {
      return JSON.parse(goodsStr)
    } catch (error) {
      console.warn('商品信息解析失败:', error);
      // 返回空数组，避免页面崩溃
      return []
    }
  }

  /**
   * 获取订单状态对应的文本描述
   * 将数字状态码转换为用户友好的文本
   * @param state 订单状态码
   * @returns 状态文本描述
   */
  const getOrderStateText = (state: number) => {
    const stateMap: { [key: number]: string } = {
      1: '待支付',    // 订单已创建，等待用户支付
      0: '已支付',    // 订单已支付，等待发货
      2: '已发货',    // 订单已发货，正在配送中
      3: '已完成',    // 订单已完成，用户已收货
      4: '已取消'     // 订单已取消
    }
    return stateMap[state] || '未知状态'
  }

  return (
    <div className={styles.container}>
      {/* 顶部导航栏 */}
      <NavBar backIcon={false}>全部服务</NavBar>
      
      {/* 根据订单列表是否为空显示不同内容 */}
      {orderList.length === 0 ? (
        // 空状态：当没有订单时显示
        <Empty
          className={styles.emptyWrapper}
          image={
            <TextOutline className={styles.emptyIcon} />
          }
          description='暂无订单记录'
        />
      ) : (
        // 订单列表：显示所有订单
        <List>
          {orderList.map((order) => {
            // 解析订单数据
            const goodsList = parseGoods(order.goods)
            const createDate = new Date(order.createTime).toLocaleDateString('zh-CN')
            const totalItems = goodsList.reduce((sum: number, goods: any) => sum + goods.quantity, 0)
            const firstGoods = goodsList[0] // 显示第一个商品名称作为主要商品
            
            return (
              <List.Item
                key={order.id}
                onClick={() => handleOrderClick(order)}
                className={styles.orderItem}
                prefix={
                  // 左侧图标：购物袋图标
                  <div className={styles.iconWrapper}>
                    <ShopbagOutline className={styles.icon} />
                  </div>
                }
                extra={
                  // 右侧状态标签：显示订单状态
                  <div className={styles.statusBadge}>
                    {getOrderStateText(order.state)}
                  </div>
                }
              >
                <div className={styles.contentWrapper}>
                  {/* 第一行：订单类型和标签 */}
                  <div className={styles.orderTypeRow}>
                    <span className={styles.orderTypeText}>
                      {getOrderStateText(order.state)}订单
                    </span>
                    <span className={styles.orderTag}>
                      商品订单
                    </span>
                  </div>
                  
                  {/* 第二行：创建日期和商品数量 */}
                  <div className={styles.dateRow}>
                    <span>{createDate}</span>
                    <span className={styles.separator}>|</span>
                    <span>共{totalItems}件商品</span>
                  </div>
                  
                  {/* 第三行：主要商品名称 */}
                  <div className={styles.goodsTitle}>
                    {firstGoods?.title || '商品信息'}
                  </div>
                </div>
              </List.Item>
            )
          })}
        </List>
      )}
    </div>
  )
}

export default Index

